<template>
  <div class="anchor-main">
    <a-anchor :showInkInFixed="true">
      <a-anchor-link v-for="item in anchorList" :key="item.name" :href="item.link" :title="item.name" />
    </a-anchor>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      anchorList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
  .anchor-main {
    /*position: fixed;*/
    /*left: 100px;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*margin: auto 0;*/
    display: inline-block;
    float: left;

    /deep/ .ant-affix {
      /*padding: 5px;*/

      .ant-anchor-wrapper {
        margin: 0;
        padding: 0;
        overflow: inherit;
      }
    }

    /deep/ .ant-anchor {
      width: 70px;
      opacity: 1;
      background: #ffffff;
      border-radius: 2px;
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.12);
      padding: 0;

      .ant-anchor-ink {
        display: none;
      }

      .ant-anchor-link {
        width: 70px;
        height: 44px;
        line-height: 44px;
        padding: 0;
        text-align: center;

        a:hover, a:active, a:focus {
          color: @activeRed;
        }
      }

      .ant-anchor-link-active {
        background: @activeRed;
        color: #fff;

        a, a:hover, a:active, a:focus {
          color: #fff;
        }
      }
    }

  }
</style>
